<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="box" style="color: red">123</div>
    <script>
      //操作dom
      // 一、给dom元素填充文本innerText: 1.替换原本的文本 ；2. 获取元素对应文本；
      var divEle = document.querySelector(".box");
      divEle.innerText = "333";
      // divEle.innerText(555); //错误写法；
      console.log(divEle.innerText);

      // 二、设置或者获取dom元素的超文本(html)； innerHTML
      // 1.替换超文本  2. 获取超文本； 3.替换的内容 一般是字符串或者数字；
      var divEle = document.querySelector(".box");
      divEle.innerHTML = 5555;
      divEle.innerHTML = "hallo";
      var obj = { name: "张三" };
      divEle.innerHTML = obj;

      // 三、innerHTML 和 innerText区别
      var divEle = document.querySelector(".box");
      divEle.innerHTML = "<h1>我是标题</h1>";
      divEle.innerText = "<h1>我是标题</h1>";

      // 四、style：设置或者获取样式； 注意：只能设置或者获取行间样式；
      var divEle = document.querySelector(".box");
      document.onclick = function () {
        divEle.style.color = "red";
      };
      document.onclick = function () {
        console.log(divEle.style.color);
      };
    </script>
  </body>
</html>
